<template>
  <el-container>
    <el-header>
      <layout-header @collapse="getCollapse">
      </layout-header>
    </el-header>
    <el-container class="home-container">
      <layout-side :currentActive='currentActive' :menuData="menuData" :menuStyle="menuStyle"></layout-side>
      <el-main>
        <div class="page">
          <p class="page-title-p">
            <span class="page-title-span" v-text="pageDynamicItem.pageTitle"></span>
            <el-button icon="el-icon-back" class="backBtn" v-if="pageDynamicItem.hasBackBtn"
                       type="success" @click="backToList()">返回
            </el-button>
          </p>
          <router-view :key="key"></router-view>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import layoutHeader from '@/components/header'
import layoutSide from '@/components/menu'

export default {
  name: 'Home',
  data () {
    return {
      // 当前所在页面
      currentActive: '',
      // 是否折叠
      isCollapse: false,
      // 菜单
      menuData: [],
      // 菜单样式
      menuStyle: {
        background: '',
        text: '',
        active: ''
      }

    }
  },
  watch: {
    $route: {
      handler: function (val, oldVal) {
        this.currentActive = val.path
      },
      immediate: true,
      // 深度观察监听
      deep: true
    }
  },
  components: {
    layoutHeader,
    layoutSide
  },
  computed: {
    key () {
      return this.$route.name ? this.$route.name + new Date().getTime() : this.$route.fullpath + new Date().getTime()
    },
    // 页面标题和返回按钮是否存在
    pageDynamicItem: function () {
      let item = {}
      switch (this.$route.query.pageFlag) {
        case 'edit':
          item = {
            pageTitle: '编辑',
            hasBackBtn: true
          }
          return item
        case 'view':
          item = {
            pageTitle: '详情',
            hasBackBtn: true
          }
          return item
        default:
          item = {
            pageTitle: this.$route.meta.name,
            hasBackBtn: false
          }
          return item
      }
    }
  },
  methods: {
    backToList () {
      this.$router.go(-1)
    },
    // 获取菜单
    getMenuData () {
      this.menuData = this.$store.getters.menu
    },
    // 获取折叠事件
    getCollapse (value) {
      this.isCollapse = value
    }
  },
  created () {
    this.getMenuData()
  },
  mounted () {
  }
}
</script>
<style lang="scss">
/*修改滚动条样式*/
div::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

div::-webkit-scrollbar-track {
  background: rgb(239, 239, 239);
  border-radius: 2px;
}

div::-webkit-scrollbar-thumb {
  background: #bfbfbf;
  border-radius: 10px;
}

div::-webkit-scrollbar-thumb:hover {
  background: #333;
}

div::-webkit-scrollbar-corner {
  background: #179a16;
}

.el-main::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.el-main::-webkit-scrollbar-track {
  background: rgb(239, 239, 239);
  border-radius: 2px;
}

.el-main::-webkit-scrollbar-thumb {
  background: #bfbfbf;
  border-radius: 10px;
}

.el-main::-webkit-scrollbar-thumb:hover {
  background: #333;
}

.el-main::-webkit-scrollbar-corner {
  background: #179a16;
}

/*折叠菜单时隐藏 slot="title" 的 > 和 span 标签*/
.el-menu--collapse > .el-menu-item .el-submenu__icon-arrow, .el-menu--collapse > div > div > .el-submenu > .el-submenu__title .el-submenu__icon-arrow {
  display: none;
}

.el-menu--collapse > .el-menu-item .el-submenu__icon-arrow, .el-menu--collapse > div > div > .el-submenu > .el-submenu__title span {
  display: none;
}

.el-container {
  height: 100vh;

  .el-main {
    //background: #f5f5f5 ;
    background: #dddddd2b;

    > div:nth-child(1) {
      background: #ffffff;
      min-height: 100%;
      padding: 0 10px;
      display: flex;
      flex-direction: column;
    }
  }

  //.el-menu {
  //  .el-submenu__title {
  //    background: #31394c !important;
  //  }
  //
  //  .el-menu-item {
  //    background: #31394c !important;
  //  }
  //
  //  .is-active {
  //    background-color: #313232 !important;
  //  }
  //}
  //
  //.el-menu-vertical-demo, .el-menu {
  //  background: #31394c !important;
  //}

  //.el-aside {
  //  background: rgb(49, 57, 76);
  //}

  .el-header {
    /*box-shadow: 1px 1px 5px 0 #ccc;*/
    background: $--color-primary;
  }

  .page-title-p {
    padding: 20px 0;
    font-weight: bolder;
  }

  .page-title-span {
    position: relative;
    padding: 0 10px;
    border-left: 5px solid $--color-primary;
    font-size: 18px;
  }

  .page-title-span:after {
    position: absolute;
    width: 100%;
    height: 2px;
    content: '';
    top: 25px;
    left: 0;
    /*background: #ff5000;*/
    background: transparent;
  }

  .backBtn {
    float: right;
  }

  .page {
    height: 100%;
  }

  .longPage {
    height: auto;
  }

  .marquee {
    background: #fafafa;
    position: absolute;
    top: 60px;
    left: 0;
    display: flex;
    width: 100%;

    img {
      width: 30px;
    }
  }
}

.home-container {
  height: calc(100% - 60px) !important;
}
</style>
